<script setup>
import { onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { getHotAuthorAPI, searchAPI } from '@/apis/home'
import { useRouter } from 'vue-router';

defineOptions({
    name: 'mobileSearch'
})

const router = useRouter()

let searchValue = ref('')   // 搜索关键字
let hotList = ref([
    '耐克',
    '2024年度实战榜单',
    'XCin',
    '韦德之道',
    'CBA春节大战',
    'anta',
    '【球鞋日记】李宁 全城11 实战测评',
    '耐克推出「Yeezy」平替'
]) //搜索热点列表
let hotAuthorList = ref([]) //热门博主列表
let searchList = ref([])    // 搜索结果列表


onMounted(() => {
    getHotAuthorList()
})

const getHotAuthorList = async () => {
    let res = await getHotAuthorAPI()
    if (res.code === 200) {
        hotAuthorList.value = res.data
    }
}

const setSearchValue = (value) => {
    searchValue.value = value
}

const searchAction = async () => {
    let res = await searchAPI(searchValue.value)
    if (res.code === 200) {
        searchList.value = res.data
        setTimeout(() => {
            window.scrollTo({
                top: 330,
                behavior: 'smooth'
            })
        })
    } else {
        searchList.value = []
        ElMessage({
            message: res.msg,
            type: 'warning',
            plain: true,
        })
    }

}

const toDetailAction = (article_id, article_author_id) => {
    router.push({ name: 'detail', query: { article_id, user_id: article_author_id } })
}

</script>

<template>
    <el-backtop :right="50" :bottom="100"></el-backtop>
    <div class="page">
        <div class="mobileSearch">
            <div class="mobileSearch-top">
                <el-input v-model="searchValue" size="large" placeholder="在这里输入搜索..." :prefix-icon="Search"></el-input>
                <el-button color="#626aef" size="large" style="margin-left: 5px; border: none;"
                    @click="searchAction"><el-icon>
                        <Search />
                    </el-icon></el-button>
            </div>
            <div class="mobileSearch-mid">
                <div class="mid-hot">
                    <div class="hot-title">搜索热点</div>
                    <div class="hot-list">
                        <div class="hot-item" v-for="(item, index) in hotList" :key="index"
                            @click="setSearchValue(item)">{{ index +
                                1 }} {{ item }}
                        </div>
                        <div>...</div>
                    </div>
                </div>
                <div class="mid-author">
                    <div class="author-title">热门博主</div>
                    <div class="author-list">
                        <div class="author-item" v-for="item in hotAuthorList" :key="item.user_id">
                            <div class="item-avatar"><img :src="item.user_avatar" alt=""></div>
                            <div class="item-name">{{ item.user_name }}</div>
                            <div class="item-icon">{{ item.likeCount }} ☀</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mobileSearch-bottom" v-if="searchList.length">
                <div class="bottom-list">
                    <div class="list-title">为您搜索到以下{{ searchList.length }}条结果:</div>
                    <div @click="toDetailAction(item.article_id, item.article_author_id)" class="bottom-item"
                        v-for="item in searchList" :key="item.article_id">
                        <div class="item-left">
                            <div class="left-title">{{ item.article_title }}</div>
                            <div class="left-introduction">{{ item.article_introduction }}</div>
                        </div>
                        <div class="item-right"><img :src="item.article_coverimg" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang='scss'>
@import url(./mobileSearch.scss);
</style>